<style type="text/css">
	#bottom_content_left {
		background: none repeat scroll 0 0 white;
		bottom: 0;
		float: right;
		left: 0;
		position: absolute;
		width: 30%;
		height:100%;
		top: 150px;
		margin-left:5px;
	}
	#left_menu {
		float: left;
		width: 100%;
		height:auto;
	}
	.tabbandocontent select {
    	width: 310px !important;
		border: 1px solid #C4C4C4;
    	height: 30px;
		vertical-align:middle;
		padding:5px;
	}
	.tabbandocontent .editor-label {
		display: block;
		margin-top: 10px;
		margin-bottom:5px;
		font-size:12px;
		font-weight:bold;
	}
	.tabbandocontent .submitbutton{
		background: none repeat scroll 0 0 #06649F;
		border: 0 none;
		color: #FFFFFF;
		cursor: pointer;
		font-family: Arial,verdana,serif;
		font-size: 12px;
		font-weight: bold;
		padding: 5px 31px 5px 30px;
		-webkit-border-radius: 3px 3px 3px 3px;
     	-moz-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
	}
	#bottom_content {
		bottom: 0;
		float: right;
		right: 0;
		top: 150px;
		position: absolute;
		width: 69%;
		height:100%;
		background-color: #CCC;
	}
	.topLeftDiv {
		color: red;
		float: left;
		font-family: Trebuchet MS,Geneva,Tahoma;
		font-size: 15px;
		height: 20px;
		padding: 10px 0 0 5px;
		text-align: center;
		width: 100%;
	}
	.bando_red{
		color:#3B59AA;
	}
	.rightimg .nd_rightbd {
    	float: right;
	}
	.rightimg .nd_leftbd {
		float: left !important;
	}
	.navlist li {
		border-bottom: 1px dotted #CCCCCC;
		float: left;
		font-size: 11px;
		height: auto;
		overflow: hidden;
		width: 100%;
	}
	.navlist li a:link {
		background-position: 0 0.5em;
		background-repeat: no-repeat;
		font-size: 11px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		padding-left: 0;
		text-decoration: none;
	}
	.navlist li a:visited {
		background-position: 0 0.5em;
		background-repeat: no-repeat;
		font-size: 11px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		padding-left: 0;
		text-decoration: none;
	}
	.navlist li a:hover {
		color: #FF0000;
		font-size: 11px;
		text-decoration: none;
	}
	.navlist li a:active {
		background-position: 0 0.5em;
		background-repeat: no-repeat;
		color: #FF0000;
		font-size: 11px;
		margin-bottom: 5px;
		padding-bottom: 5px;
		padding-left: 0;
		text-decoration: none;
	}
	.textTitle {
		color: #0070E0;
	}
	#resultTab li:hover {
		background-color: #EBEBEB;
	}
	#resultTab .hover {
		background-color: #EBEBEB !important;
	}
	#left_menu2 {
		background: none repeat scroll 0 0 white;
		float: left;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		width: 100%;
	}
	.pagination {
		font-size: 80%;
		margin-top: 5px;
		padding: 0 5px;
	}
	.pagination a {
		border: 1px solid #AAAAEE;
		color: #1155BB;
		text-decoration: none;
	}
	.pagination a:hover {
		border: 1px solid #AAAAEE;
		color: orange;
		text-decoration: none;
	}
	.pagination a, .pagination span {
		display: block;
		float: left;
		margin-right: 5px;
		padding: 2px 6px;
	}
	.pagination .current {
		background: none repeat scroll 0 0 #2266BB;
		border: 1px solid #AAAAEE;
		color: #FFFFFF;
	}
	.pagination .deactive {
		background: none repeat scroll 0 0 gray;
		border: 1px solid #AAAAEE;
		color: #FFFFFF;
	}
	.pagination .current.prev, .pagination .current.next {
		background: none repeat scroll 0 0 #FFFFFF;
		border-color: #999999;
		color: #999999;
	}
	.NoiDungInfoWin {
		color: #333333;
		width: 395px;
	}
	.NoiDungInfoWin .loaibds {
		color: #0060BF;
		display: inline-block;
		font-size: 15px;
		font-weight: bold;
		line-height: 18px;
	}
	.NoiDungInfoWin p {
		background: url("../images/new_small.png") no-repeat scroll left 2px transparent;
		border-bottom: 1px dotted #CCCCCC;
		font-size: 11px;
		text-indent: 15px;
	}
	.NoiDungInfoWin a {
		color: #A8A8A8;
	}
	.NoiDungInfoWinBottom {
		background-color: #F2F2F2;
		border: 0 none;
		color: #BFBFBF;
		font-size: 11px;
		margin: 2px 0;
		padding: 2px;
		width: 395px;
	}
	.NoiDungInfoWinBottom a {
		color: red;
		text-decoration: none;
	}
	.NoiDungInfoWinBottom a:hover {
		color: #333333;
		text-decoration: none;
	}
	ul.thongtin_marker li .float-right {
		float: none;
		font-weight: bold;
		padding-left: 75px;
	}
	#left_menu th,td {
		font-size:12px;
		border: 0;
	}
	.float-left {
		float: left;
	}
	.DirectPoint{
		color: #000000;
    	font-family: arial,sans-serif;
    	font-size: 13px;
		-moz-border-bottom-colors: none;
		-moz-border-left-colors: none;
		-moz-border-right-colors: none;
		-moz-border-top-colors: none;
		background-color: #FFFFFF;
		border-color: #C0C0C0 #D9D9D9 #D9D9D9;
		border-image: none;
		border-radius: 2px 2px 2px 2px;
		border-right: 1px solid #D9D9D9;
		border-style: solid;
		border-width: 1px;
		padding-left: 8px;
	}
</style>
<script type="text/javascript" src="js/tim-kiem-tren-ban-do.js"></script>

<script type="text/javascript">
 function LightOn(li) {
	$("#resultTab li").each(
	function () {
		this.removeAttribute("class");
	});

	li.setAttribute("class", "hover");
}
function LightOff(li) {
	$("#resultTab li").each(
	function () {
		this.removeAttribute("class");
	});
}
function UpdateCity(){
	var idTinhThanh = $('.addressPart').val();
	var comboboxId = parseInt($(".comboboxId", $('.addressPart').parent()).first().val());
	
	if(idTinhThanh>0){
		$.ajax({
			url:"controller/xl_tim_quan.php",
			type:"POST",
			dataType:"json",
			data: { idTT: idTinhThanh },
			success: function (data) {				
				if (data.length > 0)
				{
					$('#childAddressPartContainer').html("");
					var container = $("<div>").addClass("addressPartContainer").appendTo($("#childAddressPartContainer"));
					$("<input type='hidden' value='" + (comboboxId + 1) + "' />").addClass("comboboxId").appendTo(container);
					var childCbb = $("<select onChange='AdvanceSearch();' id='quanhuyen' >").addClass("addressPart").appendTo(container);
					childCbb.append("<option value=''>- Chọn Quận/Huyện -</option>");
					for($i=0;$i<data.length;$i++){
						childCbb.append("<option value='" + data[$i].MaQuan + "'>" + data[$i].TenQuan + "</option>");
					}
				}
			}
		})
	}
	
}
$(document).ready(function(){
	$('#PlaceRevision_Group').change(function(){
		AdvanceSearch();
	});
	$('#tinhthanh').change(function(){
		AdvanceSearch();
		UpdateCity();
	});

	$('ul#tabbando li:first-child a').addClass('ui-tabs-selected');
	 $('ul#tabbando li a').click(
		  function(){//xét sự kiện click của từng tab menu để đổi tab nội dung tương ứng
			  $(this).parent().siblings().find("a").removeClass('ui-tabs-selected');
			  $(this).addClass('ui-tabs-selected');
			  var currentTab = $(this).attr('id');
			  $(currentTab).siblings().addClass('ui-tabs-hide');
			  $(currentTab).removeClass('ui-tabs-hide');
	 });
});
 $(function () {
            $(".DirectPoint").autocomplete({
                source: function (request, response) {
                    if (!geocoder) {
                        geocoder = new google.maps.Geocoder();
                    }
                    var geocoderRequest = { address: request.term };
                    geocoder.geocode(geocoderRequest, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            response($.map(results, function (item) {
                                return { label: item.formatted_address, value: item.formatted_address }
                            }))

                            mydata = [];
                        }
                    });
                }
            });
        });
</script>
<title>Tìm kiếm trên bản đồ</title>
<div id="mainfullcontent">
	
   	<div id="bottom_content_left" >
    	<div id="#left_menu">
        <form method="post" name="searchOnmap" action="">
        	<!--menu tab-->
            <ul id="tabbando" class="ui-tabs-nav">
                <li>
                    <a  id="#tabs-1">Tìm địa điểm</a>
                </li>
                <li>
                    <a  id="#tabs-2">Tìm đường</a>
                </li>
            </ul>
            <!--[end] menu tab -->
            <div id="left_menu2" >
            
                <div id="tabs-1" class="tabbandocontent" >
                    
                        <div class="editor-label">
                            <label>Tỉnh/Thành Phố</label>
                        </div>
                        <div id="parentAddressPartContainer" class="addressPartContainer">
                            <input class="comboboxId" type="hidden" value="1">
                            <select id="tinhthanh" class="addressPart" name="tinhthanh">
                                    <option value="">- Chọn Tỉnh/Thành Phố -</option>
                                    <?
                                        foreach($arrTinhThanh as $row){
                                            $value = $row['MaTinhThanh'];
                                            $name = $row['TenTinhThanh'];
                                    ?>
                                    <option value="<?=$value?>"><?=$name?></option>
                                    <? } ?>            
                            </select>
                           
                       </div>
                        <div class="editor-label">
                           Quận/Huyện
                        </div>
                       <div id="childAddressPartContainer">
                       	<select id="quanhuyen" class="addressPart valid">
                        	<option value="">- Chọn Quận/Huyện -</option>
                        </select>
                       </div>
                        <div class="editor-label">
                            <label for="CategoryName">Nhóm địa điểm</label>
                        </div>
                        <select id="PlaceRevision_Group" name="PlaceRevision.Group">
                                <option value="">- Chọn nhóm địa điểm -</option>
                                <?
                                    foreach($arrNhomDiaDiem as $row){
                                        $value = $row['MaNhomDiaDiem'];
                                        $name = $row['TenNhomDiaDiem'];
                                ?>
                                <option value="<?=$value?>"><?=$name?></option>
                                <? } ?>            
                          </select>
                       
                
                        <div id="Loading" style="text-align: center; width: 100%; display: none;">
                            <img src="images/blue_spinner.gif">
                        </div>
                        <div id="resultInfo" class="topLeftDiv" style="display: block;">
                        </div>
                        <ul id="resultTab" class="navlist rightimg" style="display: block;">
                   		</ul>
                        <table style=" margin: 0 auto; width: auto; border-spacing: 0px;">
                        	<tbody>
                            	<tr>
                                	<td>
                                    	<div id="Pagination" class="pagination" style="display: block;"></div>
                                    </td>
                                </tr>
                            </tbody>
                		</table>
                </div>
                <!--tab 2-->
                <div id="tabs-2"  class="tabbandocontent ui-tabs-panel ui-tabs-hide" >
                    <div id="notify"></div>
                    <div id="directionInput" style="margin-top: 20px">
                    	<div class="direction">
                        	<img align="absmiddle" src="images/Map-Marker-Marker-Inside-Pink-icon.png">
                            <input id="DInput1" class="DirectPoint ui-autocomplete-input" type="text" style=" height:30px; width: 300px" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
                        </div>
                        <br />
                        <div class="direction">
                        	<img align="absmiddle" src="images/Map-Marker-Marker-Inside-Pink-icon.png">
							<input id="DInput2" class="DirectPoint ui-autocomplete-input" type="text" style="height:30px;width: 300px" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
                        </div>
                    </div>
                    <div id="directionButton" style="padding-bottom: 10px;">
                    	<p style="margin-left: 34px; margin-top: 10px">
                        	<input class="submitbutton" type="button" onclick="timDuong()" value="Tìm đường">
							<input class="submitbutton" type="button" onclick="xoaTimDuong()" value="Xóa kết quả">
                        </p>
                    </div> 
                    <div id="DirectionResult" style=" height:410px; direction: ltr; overflow-y: auto;"></div>  
                </div>
                
            </div><!--[end]left_menu2-->
            
            
        </form>    
        </div>
    </div>
    
    <div id="bottom_content"><!--load map-->
    	<div id="right_content">
        	<div id="map_canvas">
            </div>
        </div>
    </div>
    
</div>